<template>
	<view class="tab">
		<template v-for="(item, index) of pageData">
			<button v-if="isShow(item.linkUrl)" :open-type="item.linkUrl == 'concat' ? 'contact' : ''" :key="index"
				:style="{ width: pageData.length > 3 ? '25%' : '33%' }" class="u-reset-button item"
				@click="goItem(item)">
				<view class="icon_box">
					<image v-if="item.image" class="big_icon" mode="aspectFill" :src="item.image" />
					<view v-else :style="{ color: item.color || vuex_config.themeColor1 }"
						:class="['big_icon', 'iconfont', item.icon]"></view>
				</view>
				<view class="title">{{ item.title }}</view>
			</button>
		</template>
	</view>
</template>

<script>
	import {
		userTemplate
	} from './userTemplate.js';
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [userTemplate],
		computed: {
			isShow(linkUrl) {
				return function(linkUrl) {
					if(this.filterObj[linkUrl]){
						let str = this.filterObj[linkUrl]
						return this[str]
					}else{
						return true
					}
				};
			}
		},
		data() {
			return {};
		},
		methods: {
			goItem(item) {
				this.$emit('groupItemGo', item);
			}
		}
	};
</script>

<style scoped lang="scss">
	@import './index.scss';

	.tab {
		background: #fff;
		padding: 10rpx 0;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		position: relative;
		.item {
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			.title {
				margin-top: 16px;
			}
		}
	}

	/* #ifdef MP-ALIPAY */
	.u-reset-button {
		border: 0;
	}

	/*  #endif  */
</style>
